<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        .searchBox {
            background: #FFBB12;
            justify-content: center;
            align-items: center;
            padding: 0.4rem;
            box-sizing: border-box;
            width: 100%;
        }

        .back {
            width: 0.32rem;
            cursor: pointer;
        }

        .search_icon {
            width: 0.52rem;
            cursor: pointer;
        }

        .search_input {
            flex: 1;
            font-size: 0.426rem;
            background: #fff;
            margin: 0.266rem;
            height: 0.8rem;
            border: none;
            text-indent: 1em;
            border-radius: 0.133rem;
            outline: none;
        }

        .menu {
            font-size: 0.374rem;
        }

        .menu_left {
            background: #F5F5F5;
            color: #333333;
            width: 2rem;
            text-align: center;
            min-height: 530px;
        }

        .menu_right {
            background: #fff;
            color: #2D2D2D;
            flex-wrap: wrap;
            flex: 1;
            box-sizing: border-box;
            padding: 0.32rem 0.26rem;
            /* justify-content: space-between; */
            align-content: flex-start;
        }

        .menu_left_li {
            width: 100%;
            padding: 0.453rem 0;
            cursor: pointer;
        }

        .menu_left_li_active {
            color: #FFBB12;
            background: #fff;
        }

        .menu_right_li {
            text-align: center;
            margin: 0 0.3rem;
            margin-top: 0.64rem;

        }

        .menu_right_li_img {
            width: 1.6rem;
            height: 1.2rem;
        }

        .menu_right_li_text {
            margin-top: 0.533rem;
        }

        .menu_right_li_text span {
            color: #FF0000;
        }
    </style>
    <script src="./js/index.js"></script>
</head>

<body>
    <main>
        <div class="flex searchBox">
            <img class="back" src="./img/back.png" alt="">
            <input type="text" class="search_input">
            <img class="search_icon" src="./img/search2.png" alt="">
        </div>
        <div class="flex footer">
            <div class="footer_li footer_active sy">
                <img src="./img/footer_img1.png" alt="">
                <div>首页</div>
            </div>
            <div class="footer_li fl">
                <img src="./img/footer_img2.png" alt="">
                <div>分类</div>
            </div>
            <div class="footer_li fw">
                <img src="./img/footer_img3.png" alt="">
                <div>服务</div>
            </div>
            <div class="footer_li wd">
                <img src="./img/footer_img4.png" alt="">
                <div>我的</div>
            </div>
        </div>
        <div class="flex menu">
            <div class="menu_left">
                <div class="menu_left_li menu_left_li_active">推荐分类</div>
                <div class="menu_left_li">工业废旧</div>
                <div class="menu_left_li">城市废旧</div>
                <div class="menu_left_li">生活废旧</div>
                <div class="menu_left_li">生活垃圾</div>
                <div class="menu_left_li">某某某</div>
                <div class="menu_left_li">某某某</div>
                <div class="menu_left_li">某某某</div>
            </div>
            <div class="flex menu_right">
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
                <div class="menu_right_li">
                    <img class="menu_right_li_img" src="./img/jiutie.png" alt="">
                    <div class="menu_right_li_text">旧铁<span>(议价)</span></div>
                </div>
            </div>
        </div>
    </main>
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/public.js"></script>
    <script>
        $('.menu_left_li').click(function () {
            $('.menu_left_li').removeClass('menu_left_li_active');
            $(this).addClass('menu_left_li_active');
        })
    </script>
</body>

</html>